<template>
    <div>
        <svg :style="{width,height}">
            <!-- xlink:href执行用哪个图标，属性值就为#icon-图标名称 -->
            <!-- use标签的fill属性可以设置图标的颜色 -->
            <use :xlink:href="prefix+name" :fill="color"></use>
        </svg>
    </div>
</template>

<script setup lang="ts">
// 接收父组件传来的参数
defineProps({
    prefix: {
        type: String,
        default: "#icon-"
    },
    // 提供使用图标的名称
    name:String,
    // 接收父组件传来的颜色
    color:{
        type:String,
        default:""
    },
    // 接收父组件传来的大小
    height:{
        type:String,
        default:"16px"
    },
    width:{
        type:String,
        default:"16px"
    },
})

</script>

<style scoped></style>